<template>
  <div class="home">
    <div class="head_title">
      <div class="logo_box">
        <img class="logo" src="@/assets/img/logo.png" alt="" />
        <div class="title">
          <span class="title_bg"> 中国建筑装饰协会 </span>
          <span class="title_sm"> 会员查询系统 </span>
        </div>
      </div>
      <div class="w">
        <div class="search_box">
          <div class="search_fun">
            <div style="margin-right: 30px">
              <div class="hint">输入初始化密码后点击查询就会显示证书</div>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>

            <div>
              <el-button type="success" @click="search">查 询</el-button>
              <el-button type="primary" @click="handForgetPaw"
                >忘记密码</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_box">
      <!-- //忘记密码 -->
      <ForgetPaw v-if="state == 1" />
      <!-- //证书查询 -->
      <div v-if="state == 2" class="book_search_box">
        <UserImg :showBtn="true" :userInfo="userInfo" />
        <!-- 提示修改初始密码 -->
        <EditPaw @ceshi1="ceshi" v-if="isShowPaw" :idCard="userInfo.idCard" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import ForgetPaw from "@/components/ForgetPaw.vue";
import UserImg from "@/components/UserImg.vue";
import EditPaw from "@/components/EditPaw.vue";
import { useRouter } from "vue-router";
import { getCertByPassWord } from "@/utils/apis";
import { ElMessage } from "element-plus";
import { BASE_URL } from "@/utils/config";
export default defineComponent({
  components: {
    ForgetPaw,
    UserImg,
    EditPaw,
  },
  name: "Home",
  setup() {
    const router = useRouter();
    const state = reactive({
      details: {},
      input: "",
      state: 0,
      userInfo: {} as any,
      isShowPaw: false,
    });
    const search = () => {
      getCertByPassWord({
        passWord: state.input,
      }).then((res) => {
        console.log(state.input);
        if (res.data) {
          state.isShowPaw = state.input == res.data.idCard ? true : false;
          state.state = 2;
          if (res.data.handImg) {
            res.data.photoUrl = `${BASE_URL}/userCert/photo?url=${res.data.handImg}`;
          }
          // if (res.data.certTime) {
          //   res.data.certTime = (new Date(res.data.certTime) as any).Format(
          //     "yy-MM-dd"
          //   );
          // }
          state.userInfo = res.data;
        } else {
          state.state = 0;
          ElMessage("未查询到证书,请重新输入!");
        }
      });
    };
    const handForgetPaw = () => {
      state.state = 1;
    };
    const ceshi = () => {
      console.log("???");
    };
    return { ...toRefs(state), search, handForgetPaw, ceshi };
  },
});
</script>
<style  lang="scss" scope>
.content_box {
  height: 100%;
  width: 100%;
  background-color: #2b83c0;
  min-height: calc(100vh - 300px);
  padding-top: 15px;
  .book_search_box {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
.head_title {
  background: linear-gradient(
    to bottom,
    rgba(117, 189, 209, 1) 0%,
    rgba(39, 124, 184, 1) 95%,
    rgba(39, 124, 184, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75bdd1', endColorstr='#277cb8', GradientType=0 );
  height: 300px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .search_box {
    width: 80%;
    margin: 0 auto;
    // height: 100px;
    background-color: rgba(1, 1, 1, 0.3);
    border-radius: 6px;
    padding: 20px;
    .search_fun {
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
    .hint {
      color: #fff;
      font-size: 22px;
      margin-bottom: 20px;
    }
  }
  .logo_box {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    .logo {
      width: 80px;
      height: 80px;
      margin-right: 20px;
    }
    .title {
      color: #fff;
      .title_bg {
        font-size: 60px;
        font-weight: 600;
      }
      .title_sm {
        font-size: 30px;
      }
    }
  }
}
</style>
